<template>
  <div class="child-detail">
    <v-tableTitle :btnConfig="btnConfig" :tableSelectData="tableSelectData" @back="back" @save="save" @create="create" @del="del"></v-tableTitle>
    <template v-if="activeName == 'list'">
      <component :inputData.sync="detailData" :is="currentComponent" :apiParams="apiParams" ref="table" @check="handleCheck" @select="handleSelect"></component>
    </template>
    <template v-else>
      <el-tabs v-model="activeName">
        <el-tab-pane v-for="(pane,i) in componentConfig" :key="i" :label="pane.label" :name="pane.name">
          <keep-alive>
            <component 
                :inputData.sync="detailData"
                :is="pane.component"
                :ref="pane.name"
            ></component>
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>

<script>
import tableTitle from "commons/TableTitle";
import baseMixin from "@/mixins/BaseMixin";

export default {
  name: "DetailList",
  mixins: [baseMixin],
  props:{
    apiParams:{
      type:Object
    }
  },
  data() {
    return {
      detailData:{},
      activeName:"list",
      componentConfig: [
        {
          name: "dispatchDetailsList",
          label: this.$t('model.deliveryDetail'),
          component: () => import("./page/dispatchDetailsList.vue")
        },
        // {
        //   name: "otherDetails",
        //   label: this.$t('ex.other'),
        //   component: () => import("./page/otherDetails.vue")
        // },
      ],
      tableSelectData:[],
      dispatchAddBtn:false
    };
  },
  computed: {
    btnConfig() {
      if(this.activeName == 'list'){
        return [
          {
            label: this.$t("common.create"),
            certigier: !this.btnPermNameList.includes("WM06070106"),
            invalid: "create",
          },
          {
            label: this.$t("common.delete"),
            certigier: !this.btnPermNameList.includes("WM06070105"),
            disabled:true,
            invalid: "del",
          },
        ];
      }else{
        if(this.$route.query?.id){
          return [
            {
              label: this.$t("common.save"),
              certigier: !this.btnPermNameList.includes("WM06070104"),
              invalid: "save",
            },
            {
              label: this.$t("common.return"),
              invalid: "back",
            },
          ];
        }else{
          return [
            {
              label: this.$t("common.save"),
              certigier: !this.btnPermNameList.includes("WM06070104"),
              invalid: "save",
            },
            // {
            //   label: this.$t("common.return"),
            //   certigier: !this.btnPermNameList.includes("WM010131"),
            //   invalid: "back",
            // },
          ];
        }
      }
    },
    currentComponent(){
      return () => import("./page/list.vue")
    }
  },
  methods: {
    handleCheck(data){
      this.getData(data.id)
      this.activeName = this.componentConfig[0].name;
    },
    handleSelect(data){
      this.tableSelectData = data;
    },
    create(){
      this.detailData = {loadingStatus:"14601",packUnit:"EA"}
      this.activeName = this.componentConfig[0].name;
    },
    //删除
    async del() {
      const deliveryStatus = this.$route.query.deliveryStatus;
      if(deliveryStatus != 14401){
        return this.$message.error(this.$t('home1.deliveryCantNotDel'))
      }
      if (this.tableSelectData.length == 0) {
        this.$message.error(this.$t("msg.msg12"));
        return;
      }
      const ids = this.tableSelectData.map(item => item.id).join(',');
      this.$post(`/dcDeliveryOrderDtl/deleteDcDeliveryOrderDtlByIds/${ids}`).then(res => {
        this.$message.success(this.$t('app.delMes'))
        this.$refs.table.getTableData();
      })
    },
    save(){
      this.$emit('handleSave',2)
    },
    // 返回到列表页面
    back() {
      this.activeName = 'list'
    },
    getData(id){
      this.$post(`/dcDeliveryOrderDtl/${id}`).then(res => {
        this.detailData = res.data
      })
    },
    validate(){
      if(this.activeName == 'list'){
        return true
      }
      return this.$refs[this.activeName][0].validate()
    }
  },
  mounted() {
    if(this.$route.query?.id){
      this.activeName = 'list';
      this.listParams = {id:this.$route.query.id};
    }else{
      this.activeName = this.componentConfig[0].name;
      this.$set(this.detailData,'loadingStatus','14601')
      this.$set(this.detailData,'packUnit','EA')
    }
  },
  components: {
    "v-tableTitle": tableTitle,
  },
};
</script>

<style></style>
